<template>
  <div
    class="toast toast-top toast-center"
    v-if="alerts.length"
    style="z-index: 1000"
  >
    <div
      class="alert"
      :class="el.alerttype"
      v-for="(el, index) in alerts"
      :key="index"
    >
      <span>{{ el.msg }}</span>
    </div>
  </div>

  <dialog id="my_modal_1" class="modal">
    <div class="modal-box">
      <h3 class="font-bold text-lg">注册申请表单说明</h3>
      <div v-if="illustrate != ''" v-html="illustrate"></div>
      <div class="modal-action">
        <form method="dialog">
          <!-- if there is a button in form, it will close the modal -->
          <button class="btn">关闭</button>
        </form>
      </div>
    </div>
  </dialog>

  <dialog id="my_modal_2" class="modal">
    <div class="modal-box">
      <h3 class="font-bold text-lg">排队进度查询</h3>
      <div class="overflow-x-auto">
        <table class="table">
          <!-- head -->
          <thead>
            <tr>
              <th></th>
              <th>时间</th>
              <th>状态</th>
              <th>说明</th>
              <th>前方等待</th>
            </tr>
          </thead>
          <tbody>
            <!-- row 1 -->
            <tr
              v-if="statelist.length"
              v-for="(item, index) in statelist"
              :key="index"
            >
              <th>{{ index + 1 }}</th>
              <td>{{ item.time }}</td>
              <td>{{ statetype[item.state] }}</td>
              <td>{{ item.msg }}</td>
              <td>
                {{ item.location == 0 ? '即将审核' : '' }}
                {{ item.location > 0 ? `${item.location}位` : '' }}
                {{
                  !(item.location >= 0) &&
                  !(item.location <= 0) &&
                  item.state == 0
                    ? item.location
                    : ''
                }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="modal-action">
        <form method="dialog">
          <!-- if there is a button in form, it will close the modal -->
          <button class="btn">关闭</button>
        </form>
      </div>
    </div>
  </dialog>

  <div style="z-index: 1">
    <div class="hero min-h-screen bg-base-200" v-if="windowWidth">
      <div class="hero-content flex-col lg:flex-row-reverse">
        <div
          class="card shrink-0 w-full max-w-sm shadow-2xl bg-base-100"
          style="min-width: 600px"
        >
          <form class="card-body">
            <div class="form-control">
              <label class="label">
                <h3 class="text-3xl font-bold">SC中文社区注册申请表单</h3>
              </label>
            </div>

            <div class="form-control">
              <label class="label">
                <span class="label-text">QQ号</span>
              </label>
              <input
                type="name"
                placeholder="请输入邮箱对应的QQ号"
                class="input input-bordered"
                required
                v-model="reg.qq"
              />
            </div>
            <div class="form-control">
              <label class="label">
                <span class="label-text">邮箱</span>
              </label>
              <input
                type="email"
                placeholder="请输入QQ邮箱"
                class="input input-bordered"
                required
                v-model="reg.email"
              />
            </div>
            <div class="form-control">
              <label class="label">
                <span class="label-text">密码</span>
              </label>
              <input
                type="password"
                placeholder="请输入密码"
                minlength="8"
                maxlength="16"
                class="input input-bordered"
                required
                v-model="reg.pass"
              />
            </div>
            <div class="form-control">
              <label class="label">
                <span class="label-text">确认密码</span>
              </label>
              <input
                type="password"
                placeholder="请输入密码"
                minlength="8"
                maxlength="16"
                class="input input-bordered"
                required
                v-model="reg.confirmpass"
              />
            </div>
            <div class="form-control">
              <label class="label">
                <span class="label-text">昵称</span>
              </label>
              <input
                type="name"
                placeholder="请输入昵称"
                maxlength="12"
                class="input input-bordered"
                required
                v-model="reg.name"
              />
            </div>

            <div class="form-control">
              <label class="label">
                <span class="label-text">你对sc圈子目前的的看法</span>
              </label>
              <textarea
                class="textarea textarea-bordered"
                placeholder=""
                v-model="reg.record"
              ></textarea>
            </div>
          </form>
          <button
            class="btn btn-primary"
            style="margin: 0 2rem 2rem 2rem"
            @click="sing"
          >
            提交
          </button>
          <!-- Open the modal using ID.showModal() method -->
          <button
            class="btn"
            style="margin: 0 2rem 2rem 2rem"
            onclick="my_modal_1.showModal()"
            @click="getillustrate"
          >
            表单说明
          </button>

          <!-- Open the modal using ID.showModal() method -->
          <button
            class="btn"
            style="margin: 0 2rem 2rem 2rem"
            onclick="my_modal_2.showModal()"
            @click="getstate"
          >
            查询进度
          </button>
        </div>
      </div>
    </div>
    <form class="card-body" v-else>
      <div class="form-control">
        <label class="label">
          <h3 class="text-2xl font-bold">SC中文社区注册表单</h3>
        </label>
      </div>
      <div class="form-control">
        <label class="label">
          <span class="label-text">QQ号</span>
        </label>
        <input
          type="text"
          placeholder="请输入邮箱对应的QQ号"
          class="input input-bordered"
          required
          v-model="reg.qq"
        />
      </div>
      <div class="form-control">
        <label class="label">
          <span class="label-text">邮箱</span>
        </label>
        <input
          type="email"
          placeholder="请输入QQ邮箱"
          class="input input-bordered"
          required
          v-model="reg.email"
        />
      </div>
      <div class="form-control">
        <label class="label">
          <span class="label-text">密码</span>
        </label>
        <input
          type="password"
          placeholder="请输入密码"
          minlength="8"
          maxlength="16"
          class="input input-bordered"
          required
          v-model="reg.pass"
        />
      </div>
      <div class="form-control">
        <label class="label">
          <span class="label-text">确认密码</span>
        </label>
        <input
          type="password"
          placeholder="请输入密码"
          minlength="8"
          maxlength="16"
          class="input input-bordered"
          required
          v-model="reg.confirmpass"
        />
      </div>
      <div class="form-control">
        <label class="label">
          <span class="label-text">昵称</span>
        </label>
        <input
          type="name"
          placeholder="请输入昵称"
          maxlength="12"
          class="input input-bordered"
          required
          v-model="reg.name"
        />
      </div>

      <div class="form-control">
        <label class="label">
          <span class="label-text">你对sc圈子目前的的看法</span>
        </label>
        <textarea
          class="textarea textarea-bordered"
          placeholder=""
          v-model="reg.record"
        ></textarea>
      </div>
    </form>
    <button
      class="btn btn-primary"
      style="margin: 0 2rem 2rem 2rem"
      @click="sing"
      v-if="!windowWidth"
    >
      提交
    </button>
    <!-- Open the modal using ID.showModal() method -->
    <button
      class="btn"
      onclick="my_modal_1.showModal()"
      v-if="!windowWidth"
      @click="getillustrate"
    >
      表单说明
    </button>

    <!-- Open the modal using ID.showModal() method -->
    <button
      class="btn"
      v-if="!windowWidth"
      style="margin: 0 2rem 2rem 2rem"
      onclick="my_modal_2.showModal()"
      @click="getstate"
    >
      查询进度
    </button>
  </div>
</template>

<script lang="ts">
import { ElMessage } from 'element-plus'
export default {
  name: 'Reg',
  data() {
    return {
      list: [],
      num: 0,
      state: 0,
      windowWidth: true,
      reg: {
        qq: '',
        pass: '',
        email: '',
        confirmpass: '',
        name: '',
        record: '',
      },
      alerts: [] as any,
      illustrate: '',
      statelist: [] as Array<any>, // Provide the correct type for statelist
      statetype: ['排队中', '已完成', '错误'],
    }
  },
  methods: {
    handleResize() {
      this.windowWidth = window.innerWidth > 786 ? true : false
    },
    getstate() {
      let myHeaders = new Headers()
      myHeaders.append('Content-Type', 'application/json')
      let requestOptions = {
        method: 'POST',
        headers: myHeaders,
        body: JSON.stringify({
          ip: '240e:468:ba92:a00c:73d0:20bc:77fd:bd8d, 113.219.202.153',
        }),
      }

      fetch('https://suancaixianyu.cn/xyscapi/getstate', requestOptions)
        .then((response) => response.json())
        .then((body) => {
          if (body.code == 200) {
            this.statelist = body.data
          } else {
            this.statelist = []
            ElMessage.error(body.msg)
          }
        })
        .catch((error) => {
          console.log('error', error)
          ElMessage.error('请求失败，服务器连接异常')
        })
    },
    getillustrate() {
      let requestOptions = {
        method: 'POST',
      }

      fetch('https://suancaixianyu.cn/xyscapi/getillustrate', requestOptions)
        .then((response) => response.json())
        .then((body) => {
          console.log(body)

          if (body.code == 200) {
            this.illustrate = body.data
          } else {
            this.illustrate = '获取失败x_x'
          }
        })
        .catch((error) => {
          ElMessage.error('请求失败，服务器连接异常')
          this.illustrate = '获取失败x_x'
          console.log('error', error)
        })
    },
    sing() {
      let myHeaders = new Headers()
      myHeaders.append('Content-Type', 'application/json')
      let requestOptions = {
        method: 'POST',
        headers: myHeaders,
        body: JSON.stringify(this.reg),
      }
      fetch('https://suancaixianyu.cn/xyscapi/reg', requestOptions)
        .then((response) => response.json())
        .then((body) => {
          if (body.code == 200) {
            ElMessage.success(body.msg)
          } else {
            ElMessage.error(body.msg)
          }
        })
        .catch((error) => {
          ElMessage.error('请求失败，服务器连接异常')
          console.log('error', error)
        })
    },
  },
  mounted() {
    window.addEventListener('resize', this.handleResize) // 监听窗口大小变化
    this.handleResize()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize) // 移除监听器
  },
}
</script>
